<template>
  <div class="navitems">
    <router-link
      v-for="item in navItems" 
      class="navitem" 
      :key="item.id"
      :to="item.path"
    >
      <span class="icon">
        <i class="iconfont" :class="item.icon"></i>
      </span>
      <span class="context">{{item.context}}</span>
    </router-link>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navItems: [
        {
          id: 1,
          icon: 'iconnav_goucai',
          context: '首页',
          path: '/home'
        },
        {
          id: 2,
          icon: 'iconnav_shixun',
          context: '视讯',
          path: '/vnews'
        },
        {
          id: 3,
          icon: 'iconnav_dianzi',
          context: '电子',
          path: '/electronics'
        },
        {
          id: 4,
          icon: 'iconnav_saishi',
          context: '赛事',
          path: '/matches'
        },
        {
          id: 5,
          icon: 'iconnav_qipai',
          context: '棋牌',
          path: '/games'
        },
        {
          id: 6,
          icon: 'iconnav_huodong',
          context: '活动',
          path: '/activity'
        },
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .navitems
    display flex
    height 100%
    align-items center
    justify-content space-between
    .navitem 
      display flex 
      flex-direction column 
      align-items center
      &.router-link-active 
        .icon 
          background $color-theme-red !important 
          .iconfont 
            color #fff 
        .context 
          color $color-theme-red 
      .icon 
        width 30px 
        height 30px
        border-radius 50% 
        background linear-gradient(0deg,rgba(250,217,177,1),rgba(254,250,224,1))
        text-align center
        .iconfont 
          font-size 18px
          line-height 30px
          color $color-theme-red
      .context 
        color $color-text-statetab
        margin-top 10px  
</style> 